<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
        <textarea v-model="message"></textarea><br>
        单个复选框：<input type="checkbox" v-model="message"/>
        多个复选框：
        1<input type="checkbox" v-model="checkBoxMsg" value="1"/>
        2<input type="checkbox" v-model="checkBoxMsg" value="2"/>
         3<input type="checkbox" v-model="checkBoxMsg" value="3"/>
    --> {{checkBoxMsg}}<br>
        单个复选框：
        1<input type="radio" v-model="radioMsg" value="1"/>
        2<input type="radio" v-model="radioMsg" value="2"/>
        3<input type="radio" v-model="radioMsg" value="3"/>
    --> {{radioMsg}}<br>
        下拉框 multiple 支持多选
        <select v-model="selectMsg">

            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    --> {{selectMsg}}<br>

    ======值绑定=====<br>
    复选框<input
    type="checkbox"
    v-model="checkboxMsg1"
    true-value="是" false-value="否"/>--> {{checkboxMsg1}}<br>
    下拉框
    <select v-model="selectMsg">

        <option v-for="opt in selectOptions" :value="opt.value">{{opt.text}}</option>
    </select>
--> {{selectMsg}}<br>

=====修饰符========

    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                message: 'hello Vue.js'
            }
        },
        //template:"<div> hello Vue.js<div>"
    }).mount("#app");
</script>
</html>